<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Reservas LAPI</title>
    <meta name="description" content="">
    <meta name="author" content="Iván Bautista Moreno (@ibaumo)">
    <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta http-equiv="cleartype" content="on">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- For iPhone 4 with high-resolution Retina display: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icon@2x.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icon-72.png">
    <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
    <link rel="apple-touch-startup-image" href="assets/images/default.png">
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="./lungo.js/lungo-1.2.css">
    <link rel="stylesheet" href="./lungo.js/lungo.theme.default.css">
</head>

<body class="app">

     <!--++++++++++++++++++++++++++++++++++ index ++++++++++++++++++++++++++++++++++--->
    
	<section id="login">
		<article class="splash indented">
			<div>
				<h1>Reservas<span class="semi-opacity"> LAPI</span></h1>
				<input type="text" placeholder="Introduzca usuario..." />
				<input type="password" placeholder="Introduce tu contraseña..." />
				<a href="#main" data-target="section" id="btnLogin" class="button big" data-icon="key">Login</a>
				<div class="copyright">Copyright LAPI Inc, 2012 &copy;</div>
			</div>
			<a href="#register" id="btnRegister" data-target="section"><u>Registrarse</u></a>
		</article>
    </section>
    <!--++++++++++++++++++++++++++++++++++ Main Section  ++++++++++++++++++++++++++++++++++-->
	<section id="main">
		<header data-title="Reservas LAPI">
			<a href="#SelectPitch" id="btnReturnMain" data-target="article" data-icon="home" class="button"></a>
		</header>
        <article id="SelectPitch" class="list scrollable"">
            <ul class="list">
			    <li class="anchor" data-icon="home">Elija instalación deportiva</li>
			    <a href="#pitchSanJose" id="btnSanJose" 	data-label="San José"	 data-target="article" data-icon="calendar" class="button big"></a>
			    <a href="#pitchMariano"	id="btnMariano" data-label="Mariano de la Paz" data-target="article" data-icon="calendar" class="button big"></a>
			    <a href="#pitchLinarejos" id="btnLinarejos" data-label="Linarejos"	 data-target="article" data-icon="calendar" class="button big"></a>
		    </ul>
		</article>
		
   	    <!--++++++++++++++++++++++++++++++++++ Pitch Section  ++++++++++++++++++++++++++++++++++-->
		
		<article id="pitchSanJose" class="list scrollable" >
			<ul class="list">
				<li class="anchor" data-icon="home">Instalaciones deportivas San Jose</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>						
			</ul>
		</article>
		
		<article id="pitchMariano" class="list scrollable" >
			<ul class="list">
				<li class="anchor" data-icon="home">Instalaciones deportivas Mariano de La Paz</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>		
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>		
			</ul>
		</article>
		
		<article id="pitchLinarejos" class="list scrollable" >
			<ul class="list">
				<li class="anchor" data-icon="home">Instalaciones deportivas Virgen de Linarejos</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>		
				<li>greger</li>
				<li>greger</li>
				<li>greger</li>		
			</ul>
		</article>
		<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
        <footer class="toolbar with-labels">
	        <nav> 
		        <a href="#" class="current" data-target="section" data-icon="home" data-label="Inicio"></a>
		        <a href="#secondary"  data-target="section" data-icon="items" data-label="Alquiladas"></a>
		        <a href="#config" data-target="section" data-icon="settings" data-label="Preferencias"></a>
	        </nav>
	    </footer>
	</section>
	<!--++++++++++++++++++++++++++++++++++ Register Section  ++++++++++++++++++++++++++++++++++-->
		<section id="register">
		<header data-title="Reservas LAPI" data-back="home"></header>
		<article id="form" class="list scrollable">
			<form action="#" method="post">
				<ul class="form">
					<li class="anchor" data-icon="user mini">
						<label>Introduce usuario:</label>
						<input type="text" name="user" placeholder="Introduce tu nick de usuario..." required />			
					</li>
					<li class="anchor" data-icon="key mini">
						<label>Introduzca su contraseña:</label>
						<input type="password" name="pass" placeholder="Introduce tu contraseña..." required />
						<input type="paswword" name="pass2" placeholder="Vuelve a introducir tu contraseña..." required />
					</li>
					<li class="anchor" data-icon="user mini">
						<label>Introduce su DNI:</label>
						<input pattern="[0-9]{8}[A-Z]"name="dni" placeholder="con letra, sin guión" required />
					</li>
					<li class="anchor" data-icon="mail mini">
						<label>Introduce tu e-mail:</label>
						<input type="email" placeholder="tu.correo@tuisp.dominio" required />
					</li>
					<li class="anchor" data-icon="phone mini">
						<label>Introduce un teléfono de contacto</label>
						<input name="telefono" pattern="(+[0-9]{3}) [0-9]{6}}" placeholder="953 123456" >
					</li>
					<li class="anchor">
						<label>¿Federado?</label>
						<label class="checkbox onright"><input type="checkbox" required /></label>
					</li>
					<li class="anchor">
						<label>¿Tienes cuenta en PayPal?</label>
						<label class="checkbox onright"><input type="checkbox" required /></label>
					</li>
					<!--li clas="anchor" data-icon="user">				
						<select class="custom">
							<option value="1">One</option>
							<option value="2">Two</option>
							<option value="3">Three</option>
						</select>
					</li-->
					
				</ul>
			<a href="#" class="button big" id="btnSend" data-icon="check">Enviar</a>
			<!--input class="button big" type="submit" name="envioform" value="enviar"  /-->
			</form>
		</article>
	
	</section>
	
	<!--++++++++++++++++++++++++++++++++++ Alq Section  ++++++++++++++++++++++++++++++++++-->
	<section id="secondary">
		<header data-title="Reservas LAPI"></header>
		<article id="alq" class="list scrollable" >
			   <ul class="list">
			    <li class="anchor" data-icon="basket">Pistas deportivas alquiladas:</li>
				</ul>
		</article>
		<footer class="toolbar with-labels">
	        <nav> 
		        <a href="#main"  data-target="section" data-icon="home" data-label="Inicio"></a>
		        <a href="#" class="current" data-target="section" data-icon="items" data-label="Alquiladas"></a>
		        <a href="#config" data-target="section" data-icon="settings" data-label="Preferencias"></a>
	        </nav>
		</footer>
    </section>
	
	<!--++++++++++++++++++++++++++++++++++ Config Section  ++++++++++++++++++++++++++++++++++-->
	<section id="config">
		<header data-title="Reservas LAPI"></header>
		<article id="conf" class="list scrollable" >
			   <ul class="list">
			    <li class="anchor" data-icon="settings mini"> Configuración</li>
				</ul>
		</article>
		<footer class="toolbar with-labels">
	        <nav> 
		        <a href="#main"  data-target="section" data-icon="home" data-label="Inicio"></a>
		        <a href="#secondary" data-target="section" data-icon="items" data-label="Alquiladas"></a>
		        <a href="#" class="current" data-target="section" data-icon="settings" data-label="Preferencias"></a>
	        </nav>
		</footer>
    </section>
	
	

	<!--+++++++++++++++++++++++++++++ JavaScript ++++++++++++++++++++++++++++-->

    <!-- LungoJS (Production mode) -->
    <script src="lungo.js/lungo-1.2.js"></script>
    <!-- LungoJS - Sandbox App -->
    <script src="app/app.js"></script>
    <script src="app/data.js"></script>
    <script src="app/events.js"></script>
    <script src="app/services.js"></script>
    <script src="app/view.js"></script>
</body>
</html>